<template>
  <!-- 试题录入 -->
  <div class='container'>夏宇航
    <el-card>
      <div class='card_hear'>{{text1}}</div>
      <el-form :model="addForm" ref="addFormRef" :rules="addFormRules" label-width="120px" :inline="false"
        size="normal">
        <el-row>
          <el-col :span="8">
            <el-form-item label="学科:" prop="subjectID">
              <el-select @change='showCatalogID($event)' style="width: 100%;" v-model="addForm.subjectID"
                placeholder="请选择">
                <el-option v-for="item in tateOptions" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
              <!-- <el-input v-model="addForm.subjectID"></el-input> -->
            </el-form-item>
            <el-form-item label="目录:" prop="catalogID">
              <el-select style="width: 100%;" v-model="addForm.catalogID" placeholder="请选择">
                <el-option v-for="item in directoryOptions" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="企业:" prop='enterpriseID'>
              <el-select style="width: 100%;" placeholder="请选择" v-model="addForm.enterpriseID">
                <el-option v-for="item in companyDataList" :key="item.id" :label="item.company" :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="城市" prop="province">
              <el-select class="filter-item" style="width: 48%;float: left" v-model="addForm.province"
                @keyup.enter="handleFilter" @change="handleProvince">
                <el-option v-for="item in citySelect.province" :key="item" :label="item" :value="item"></el-option>
              </el-select>
              <el-select class="filter-item" style="width: 48%;float: right" v-model="addForm.city"
                @keyup.enter="handleFilter">
                <el-option v-for="item in citySelect.cityDate" :key="item" :label="item" :value="item"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="方向:" prop="direction">
              <el-select style="width: 100%;" placeholder="请选择" v-model="addForm.direction">
                <el-option v-for="(item,index) in constantDataList" :key="index" :label="item" :value="item">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="题型:" prop="questionType">
          <el-radio-group v-model="addForm.questionType">
            <el-radio label="1">单选</el-radio>
            <el-radio label="2">多选</el-radio>
            <el-radio label="3">简答</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="难度:" prop="difficulty">
          <el-radio-group v-model="addForm.difficulty">
            <el-radio label="1">简单</el-radio>
            <el-radio label="2">一般</el-radio>
            <el-radio label="3">困难</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item style='height:240px' label="题干:" prop="question">
          <quill-editor style='height:200px' :options="editorOption" v-model="addForm.question">
          </quill-editor>
        </el-form-item>
        <el-form-item style='height:100%' label="选项:" v-if="addForm.questionType!=='3'">
          <span v-if="this.$route.query.id && addForm.questionType==='1'">
            <div class="fxc" ref="fxcRef" v-for="item in addForm.options" :key="item.id">
              <el-radio v-model="item.isRight" :label="1">
                {{ item.code }}</el-radio>
              <el-input v-model="item.title" style="width:200px"></el-input>
              <el-upload action="http://42.192.71.221:8889/api/private/v1/upload" list-type="picture-card"
                :on-preview="handlePictureCardPreview" :on-remove="handleRemove">
                <el-button class="el-icon-plu" type="text">点击上传</el-button>
              </el-upload>
            </div>
          </span>
          <el-radio-group @change="selectRadioChange" v-if='!this.$route.query.id && addForm.questionType==="1"'
            v-model="A">
            <div class="fxc" ref="fxcRef">
              <el-radio label="0" :value='answerStr'>A:</el-radio>
              <el-input v-model="iptStrA" class="ipt"></el-input>
              <el-upload action="http://42.192.71.221:8889/api/private/v1/upload" list-type="picture-card"
                :on-preview="handlePictureCardPreview" :on-remove="handleRemove">
                <el-button class="el-icon-plu" type="text">点击上传</el-button>
              </el-upload>
            </div>
            <div class="fxc" ref="fxcRef">
              <el-radio label="1" :value='iptStrB'>B:</el-radio>
              <el-input v-model="iptStrB" class="ipt"></el-input>
              <el-upload action="https://jsonplaceholder.typicode.com/posts/" list-type="picture-card"
                :on-preview="handlePictureCardPreview" :on-remove="handleRemove">
                <el-button class="el-icon-plu" type="text">点击上传</el-button>
              </el-upload>
            </div>
            <div class="fxc">
              <el-radio label="2">C:</el-radio>
              <el-input v-model="iptStrC" class="ipt"></el-input>
              <el-upload action="https://jsonplaceholder.typicode.com/posts/" list-type="picture-card"
                :on-preview="handlePictureCardPreview" :on-remove="handleRemove">
                <el-button class="el-icon-plu" type="text">点击上传</el-button>
              </el-upload>
            </div>
            <div class="fxc">
              <el-radio label="3">D:</el-radio>
              <el-input v-model="iptStrD" class="ipt"></el-input>
              <el-upload action="https://jsonplaceholder.typicode.com/posts/" list-type="picture-card"
                :on-preview="handlePictureCardPreview" :on-remove="handleRemove">
                <el-button class="el-icon-plu" type="text">点击上传</el-button>
              </el-upload>
            </div>
          </el-radio-group>
          <div @change="changeBox" v-if="this.$route.query.id && addForm.questionType==='2'">
            <CheckBox ref="checkBoxRef" :checkObj='item' v-for="(item,index) in addForm.options" :key="index"
              :num='index'>
            </CheckBox>
          </div>
          <div @change="changeBox" v-if="!this.$route.query.id && addForm.questionType==='2'">
            <CheckBox ref="checkBoxRef" v-for="(i,index) in num" :key="index" :num='index'>
            </CheckBox>
          </div>
          <div>
            <el-button :disabled="addForm.questionType==='2'?false:true" type="danger" @click="addCb">添加选项和答案
            </el-button>
          </div>
        </el-form-item>
        <el-form-item label="解析视频:" prop="videoURL">
          <el-input style="width: 400px;" v-model="addForm.videoURL"></el-input>
        </el-form-item>
        <el-form-item style='height:240px' label="答案解析:" prop="answer">
          <quill-editor style='height:200px;' :options="editorOption" v-model="addForm.answer"></quill-editor>
        </el-form-item>
        <el-form-item style="width: 400px; margin-bottom:40px" label="题目备注:" prop="remarks">
          <el-input type="textarea" v-model="addForm.remarks"></el-input>
        </el-form-item>
        <el-form-item label="试题标签:" prop="tags">
          <el-select filterable style="width: 400px;" placeholder="请选择" v-model="addForm.tags" multiple allow-create
            default-first-option>
            <!-- <el-option v-for="item in tagDataList" :key="item.id" :label="item.tagName" :value="item.id+''">
            </el-option> -->
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">{{text2}}</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
// 城市
import { provinces, citys } from '../../api/hmmm/citys'
// 学科
import { simple } from '../../api/hmmm/subjects'
import { simple as simples } from '../../api/hmmm/directorys'
// import { list as lists } from '@/api/hmmm/subjects.js'
// import { list } from '@/api/hmmm/directorys.js'
// import { list as taglist } from '@/api/hmmm/tags.js'
import { list as companyList } from '@/api/hmmm/companys.js'
import { direction } from '@/api/hmmm/constants.js'
import { add, detail, update } from '@/api/hmmm/questions.js'
import CheckBox from '@/module-hmmm/pages/CheckBox.vue'
// import { simple } from '../../api/hmmm/directorys'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { quillEditor } from 'vue-quill-editor'
export default {
  components: {
    quillEditor,
    CheckBox
  },
  data () {
    return {
      arr: ['A:', 'B:', 'C:', 'D:', 'E:', 'F:', 'G:', 'H:', 'I:', 'J:', 'K:', 'L:', 'M:', 'N:', 'O:', 'P:', 'Q:', 'R:'],
      num: [{}, {}, {}, {}],
      citySelect: {
        province: [],
        cityDate: []
      },
      constantDataList: [],
      // tagDataList: [],
      // 企业
      companyDataList: [],
      // 学科
      tateOptions: [],
      // 目录
      directoryOptions: [],
      addForm: {
        subjectID: null,
        catalogID: null,
        enterpriseID: null,
        province: null,
        city: null,
        direction: null,
        questionType: '1',
        difficulty: '1',
        options: [],
        question: null,
        videoURL: null,
        answer: null,
        remarks: null,
        tags: null,
        creator: null,
        addDate: null
      },
      A: '',
      iptStrA: '',
      iptStrB: '',
      iptStrC: '',
      iptStrD: '',
      addFormRules: {
        subjectID: [
          { required: true, message: '请填写学科', trigger: 'blur' }
        ],
        catalogID: [
          { required: true, message: '请填写目录', trigger: 'blur' }
        ],
        enterpriseID: [
          { required: true, message: '请填写企业', trigger: 'blur' }
        ],
        province: [
          { required: true, message: '请填写省份', trigger: 'blur' }
        ],
        direction: [
          { required: true, message: '请输入学科', trigger: 'blur' }
        ],
        question: [
          { required: true, message: '请输入题干', trigger: 'blur' }
        ],
        answer: [
          { required: true, message: '请输入答案解析', trigger: 'blur' }
        ],
        tags: [
          { required: true, message: '请选择标签', trigger: 'blur' }
        ]
      },
      editorOption: {
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'], // 加粗，斜体，下划线，删除线
            [{ list: 'ordered' }, { list: 'bullet' }], // 有序列表，无序列表
            ['blockquote'], // 引用，
            // [{ header: 1 }, { header: 2 }], // 几级标题
            ['code-block', 'image', 'link'] // 代码块 ,图片，连接
            // [{ script: 'sub' }, { script: 'super' }], // 下角标，上角标
            // [{ indent: '-1' }, { indent: '+1' }], // 缩进
            // [{ direction: 'rtl' }], // 文字输入方向
            // [{ size: ['small', false, 'large', 'huge'] }], // 字体大小
            // [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
            // [{ color: [] }, { background: [] }], // 颜色选择
            // [{ font: [] }], // 字体
            // [{ align: [] }], // 居中
            // ['clean'] // 清除样式
          ]
        }
      }
    }
  },
  methods: {
    // 试题修改
    async editQuestion () {
      if (this.$route.query.id) {
        const { data: res } = await detail({ id: this.$route.query.id })
        console.log(res)
        this.addForm = res
      }
    },
    async showCatalogID (e) {
      console.log(e)
      const { data: res1 } = await simples({ subjectID: e })
      if (res1.items?.length === 0) return this.$message.error('获取目录列表失败,列表为空')
      console.log(res1)
      this.directoryOptions = res1
    },
    changeBox (val) {
      this.addForm.options = []
      console.log(val)
      const arr = ['A', 'B', 'C', 'D', 'E', 'F', 'G']
      console.log(this.$refs.checkBoxRef)
      for (var i = 0; i < this.$refs.checkBoxRef.length; i++) {
        this.$refs.checkBoxRef[i].checkObj.code = arr[i]
        this.addForm.options.push(this.$refs.checkBoxRef[i].checkObj)
      }
    },
    addCb () {
      this.num.push({})
    },
    selectRadioChange (val) {
      this.addForm.options = []
      const fxc = document.querySelectorAll('.fxc')
      this.addForm.options.push({ code: 'A', title: this.iptStrA, img: 'saddas', isRight: false })
      this.addForm.options.push({ code: 'B', title: this.iptStrB, img: 'saddas', isRight: false })
      this.addForm.options.push({ code: 'C', title: this.iptStrC, img: 'saddas', isRight: false })
      this.addForm.options.push({ code: 'D', title: this.iptStrD, img: 'saddas', isRight: false })
      fxc.forEach((item, index) => {
        if (+val === index) {
          this.addForm.options[index].isRight = true
        }
      })
    },
    getConstantDataList () {
      this.constantDataList = direction
    },
    // 获取省
    getCityData: function () {
      this.citySelect.province = provinces()
    },
    // 选省获取到市
    handleProvince: function (e) {
      this.citySelect.cityDate = citys(e)
      this.addForm.city = this.citySelect.cityDate[0]
    },
    // 提交表单
    onSubmit () {
      this.$refs.addFormRef.validate(async flag => {
        if (!flag) return
        if (this.$route.query.id) {
          const { data: res } = await update(this.addForm)
          console.log(res)
          if (res.success) {
            this.$message.success('修改成功')
            this.$router.push('/questions/list')
          } else {
            this.$message.error('修改失败')
          }
        } else {
          const { data: res } = await add(this.addForm)
          if (!res.id) return this.$message.error('添加失败')
          this.$message.success('添加成功')
          this.$router.push('/questions/list')
        }
      })
    },
    // 获取学科简单列表
    async getSubjectList () {
      const res = await simple(this.addForm)

      if (res.status !== 200) return this.$message.error('获取学科列表失败')
      console.log(res)
      this.tateOptions = res.data
    },
    async getCompanyDataList () {
      const { data: res } = await companyList({ page: 1, pagesize: 1000 })
      if (res.items.length === 0) return this.$message.error('获取企业列表失败')
      this.companyDataList = res.items
    },
    // async getPageDataList () {
    //   // const { data: res } = await list({ page: 1, pagesize: 1000 })
    //   const { data: tagres } = await taglist(this.queryInfo)
    //   // if (res.items?.length === 0) return this.$message.error('获取学科列表失败,列表为空')
    //   if (tagres.items.length === 0) return this.$message.error('获取标签列表失败')
    //   // this.directoryOptions = res.items
    //   this.tagDataList = tagres.items
    // },
    handleRemove () { },
    handlePictureCardPreview () { }
  },
  computed: {
    answerStr () {
      return this.iptStrA
    },
    text1 () {
      return this.$route.query.id ? '试题修改' : '试题录入'
    },
    text2 () {
      return this.$route.query.id ? '确认修改' : '确认提交'
    }
    // show () {
    //   return arr[this.key]
    // }
  },
  created () {
    this.getSubjectList()
    // this.getPageDataList()
    this.getCityData()
    this.getCompanyDataList()
    this.getConstantDataList()
    this.editQuestion()
  }
}
</script>

<style scoped lang='less'>
.container {
  padding: 20px;
}
.card_hear {
  padding-left: 20px;
  height: 55px;
  line-height: 55px;
  border-bottom: 1px solid #ebeef5;
}
/deep/.el-card__body {
  padding: 0;
}
.el-form {
  margin: 20px;
}
/deep/.el-form-item {
  height: 36px;
}
/deep/.ql-toolbar.ql-snow {
  padding: 0;
}
// /deep/.el-input__inner {
//   width: 400px;
// }
.fxc {
  display: flex;
  position: relative;
  align-items: center;
  margin-bottom: 15px;
}
// .el-select {
//   width: 520px;
// }
/deep/.el-upload {
  width: 100px;
  height: 60px;
  line-height: 60px;
  margin-left: 10px;
}
/deep/.el-button--text {
  color: #000;
  text-align: center;
  line-height: 30px;
}
</style>
